
<div class="modal-header">
  <h4 class="modal-title pull-left">{{wizardTitle}}</h4>
  <button type="button" class="close" aria-label="Close" (click)="close()">
    <span class="pficon pficon-close"></span>
  </button>
</div>
<div class="modal-body">
  <mat-stepper [linear]="true" #stepper>
    <mat-step label="Importer Job properties">
      <form class="form-horizontal">
        <fieldset>
          <legend><span class="fa fa-cogs"></span> Importer properties</legend>
          <div class="control-group">
            <label class="control-label required-pf" for="name">Name</label>
            <div class="controls">
              <input type="text" placeholder="eg. My Job name" id="name" name="name" class="form-control" size="20"
                [(ngModel)]="job.name" (ngModelChange)="updateJobProperties()" required />
              <p class="help-block">The name this import job will have for later controlling it (should be unique).</p>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label required-pf" for="repositoryUrl">Repository URL</label>
            <div class="controls">
              <input type="url" placeholder="eg. http://git.mycompany.com/repos/master/MyRepository.xml"
                id="repositoryUrl" name="repositoryUrl" class="form-control" [(ngModel)]="job.repositoryUrl"
                (ngModelChange)="updateJobProperties()" required />
              <p class="help-block">The URL we'll use to scan your project (may be a Git or Subversion repository).</p>
            </div>
          </div>
          <div class="control-group">
            <h5>Is a Secondary Artifact?</h5>
            <label class="control-label" for="mainArtifact">
              <input type="checkbox" id="mainArtifact" name="mainArtifact" (ngModel)="!job.mainArtifact"
                (ngModelChange)="updateMainArtifact($event)" /> &nbsp; Just merge examples into existing API | Service
              definition.
            </label>
          </div>
        </fieldset>
      </form>
    </mat-step>
    <mat-step label="Authentication options">
      <form class="form-horizontal">
        <fieldset>
          <legend><span class="fa fa-lock"></span> Authentication secret</legend>
          <div class="control-group" *ngIf="job.repositoryUrl && job.repositoryUrl.startsWith('https:')">
            <h5>Disable SSL Verification ?</h5>
            <label for="repositoryDisableSSLValidation">
              <input type="checkbox" id="repositoryDisableSSLValidation" name="repositoryDisableSSLValidation"
                [(ngModel)]="job.repositoryDisableSSLValidation" /> &nbsp; Ignore certificate validity when accessing
              repository.
            </label>
          </div>
          <div class="control-group">
            <h5>Use Authentication secret?</h5>
            <label for="useSecret">
              <input type="checkbox" id="useSecret" name="useSecret" [(ngModel)]="useSecret"
                (change)="updateJobProperties()" /> &nbsp; Select an Authentication Secret (should be an existing one).
            </label>
          </div>
          <div class="control-group" *ngIf="useSecret">
            <div class="controls">
              <select class="form-control" name="secret"
                (change)="updateSecretProperties($event)">
                <option value="none" [selected]="isNoSecretSelected()">None</option>
                <option *ngFor="let secret of secrets" [value]="secret.id" [selected]="isSecretSelected(secret)">{{ secret.name }} </option>
              </select>
              <p class="help-block">Pick the authentication secret that will be associated to this Import Job.</p>
            </div>
          </div>
        </fieldset>
      </form>
    </mat-step>
    <mat-step label="Labels">
      <form class="form-horizontal">
        <fieldset>
          <legend><span class="fa fa-tag"></span> Labels</legend>
        </fieldset>
        <app-edit-labels [resourceName]="job.name" [labels]="job.metadata.labels"></app-edit-labels>
      </form>
    </mat-step>
    <mat-step label="Review">
      <div class="wizard-pf-review-page">
        <div class="wizard-pf-review-steps">
          <ul class="list-groups">
            <li class="list-group-item">
              <a class="apf-form-collapse">Importer Job properties</a>
              <div class="wizard-pf-review-substeps">
                <div class="wizard-pf-review-content">
                  <form class="form">
                    <div class="wizard-pf-review-item">
                      <span class="wizard-pf-review-item-label">Job name:</span>
                      <span class="wizard-pf-review-item-value">{{ job.name }}</span>
                    </div>
                    <div class="wizard-pf-review-item">
                      <span class="wizard-pf-review-item-label">Repository URL:</span>
                      <span class="wizard-pf-review-item-value">{{ job.repositoryUrl }}</span>
                    </div>
                    <div class="wizard-pf-review-item">
                      <span class="wizard-pf-review-item-label">Secondary Artifact:</span>
                      <span class="wizard-pf-review-item-value">{{ !job.mainArtifact }}</span>
                    </div>
                  </form>
                </div>
              </div>
            </li>
            <li class="list-group-item">
              <a class="apf-form-collapse">Authentication options</a>
              <div class="wizard-pf-review-substeps">
                <div class="wizard-pf-review-content">
                  <form class="form">
                    <div class="wizard-pf-review-item" *ngIf="job.repositoryUrl && job.repositoryUrl.startsWith('https:')">
                      <span class="wizard-pf-review-item-label">SSL Validation disabled:</span>
                      <span class="wizard-pf-review-item-value">{{ job.repositoryDisableSSLValidation }}</span>
                    </div>
                    <div class="wizard-pf-review-item" *ngIf="job.secretRef">
                      <span class="wizard-pf-review-item-label">Secret name:</span>
                      <span class="wizard-pf-review-item-value">{{ job.secretRef.name }}</span>
                    </div>
                  </form>
                </div>
              </div>
            </li>
            <li class="list-group-item">
              <a class="apf-form-collapse">Labels</a>
              <div class="wizard-pf-review-substeps">
                <div class="wizard-pf-review-content">
                  <form class="form">
                    <div class="wizard-pf-review-item">
                      <span class="wizard-pf-review-item-label">Job labels:</span>
                      <span class="wizard-pf-review-item-value"><app-label-list [metadata]="job.metadata"></app-label-list></span>
                    </div>
                  </form>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </mat-step>
  </mat-stepper>
</div>
<div class="modal-footer wizard-pf-footer pfng-wizard-position-override">
  <button class="btn btn-default" type="button" (click)="close()">Cancel</button>
  <button class="btn btn-default" type="button"(click)="previous()" [disabled]="isPreviousDisabled()">&lt; Back</button>
  <button class="btn btn-primary" type="button" (click)="next($event)" [disabled]="isNextDisabled()">Next &gt;</button>
</div>